<template>
<div class="bb">
   <div class="bottomBar">
    <ul>
        <li>
            <router-link to="/choiceness">
            <span class="img"></span> 
            </router-link>
        </li>
        <li>
          <router-link to="/classify">
          <span class="img"></span> 
          </router-link>
        </li>
        <li>
           <router-link to="/cutpet">
           <span class="img"></span> 
           </router-link>
        </li>
        <li>
          <router-link to="/gouwuche">
          <span class="img"></span> 
          </router-link>
        </li>
        <li>
          <router-link to="/user">
          <span class="img"></span> 
          </router-link>
        </li>
    </ul>
  

  </div>
</div>
 

  
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
$red:red;
.bb{
  // display: none;
  .bottomBar{
  // background-color: darkgoldenrod;
  
  width: 100%;
  height: .46rem;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  ul{
      display: flex;
      justify-content: space-between;
      width: 100%;
  }
  ul>li{
      flex: 1;
      a{
        width: .44rem;
        height: .46rem;
        display: block;
        margin: auto;
      }
      .img{
        display: block;
        width: 44px;
        height: 46px;
        background-image: url(../../public/newnavIco.png);
        background-size: 385px auto;
        margin: 0 auto;
        // background-color: gold;
      }

    }
   ul>li:nth-child(2) .img{
    
        background-position:-52px -2px;
  }  
   ul>li:nth-child(3) .img{
      background-position:-181px -2px;
  }  

   ul>li:nth-child(4) .img{
     background-position: -113px -2px;
  }  
   ul>li:nth-child(5) .img{
   background-position: -255px -2px;
  }  
}

}
  </style>